<template>
  <main>
    <div v-if="isLoading" id="myDynamic-loading">
      <loading style="margin-top: 100px"></loading>
    </div>
    <div v-else id="myDynamicList" v-for="item in dynamicList" :key="item.id" >
      <dynamic-box-2  :dynamicMap="dynamicMap[item.id]" :likeLists="likeList" :collectionList="collections" :dynamic="item" ></dynamic-box-2>
    </div>
    <div style="height: 400px" v-if="dynamicList.length==0">
      <h2>空空如也~</h2>
    </div>
    <div id="Pagination">
      <el-pagination
          :current-page="page.current"
          background
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="page.total">
      </el-pagination>
    </div>
  </main>
</template>

<script>
import Aside from "../../components/content/Aside";
import Dynamic from "../../components/content/Dynamic";
import {myDynamic, delDynamic, getConcernDynamic} from "@/api/dynamic"
import {getArchives} from "@/api/user";
import MyDynamicBox from "@/components/content/MyDynamicBox";
import CardTab from "@/components/content/Card/CardTab";
import CardUser from "@/components/content/Card/CardUser";
import Ranking from "@/components/content/Ranking";
import AddDynamic from "@/components/content/AddDynamic";
import Loading from "@/components/conmmon/Loading";
import DynamicBox2 from "@/components/content/DynamicBox-2";

export default {
  name: "myDynamic",
  components: {DynamicBox2, Loading, MyDynamicBox, Aside},
  data(){
    return{
      isLoading:true,
      dynamicList:[],
      dynamicMap:{},
      likeList:[],
      collections:[],
      page:{
        current:1,
        pages:0,
        total:0
      }
    }
  },
  created() {
    this.getData(this.page.current)
  },
  methods:{
    currentChange(val){
      this.getData(val)
    },
    getData(index){
      const user=this.$store.getters["user/getOther"]
      myDynamic(user.uid,user.type,index).then(res=>{
        console.log(res)
        this.page.current=res.data.extend.page.current
        this.page.total=res.data.extend.page.total
        this.page.pages=res.data.extend.page.pages
        this.dynamicMap=res.data.extend.dynamicMap
        this.likeList=res.data.extend.likeLists
        this.dynamicList=res.data.extend.page.records
        this.collections=res.data.extend.collections
        setTimeout(()=>{
          this.isLoading=false
        },100)
        this.$store.commit("comment/SET_COMMENTMAP",res.data.extend.map)
      })

    },
    // 滚动操作
    load(){
      this.loading=true
      setTimeout(()=>{
        this.dynamics.push( {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你大王大大青蛙打网球我的青蛙打网球的武器无穷大无穷大完全看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'})
        this.loading=false
      },2000)

    }
  }
}
</script>

<style lang="stylus" scoped>
main{
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #edf5f2;
}
#myDynamic-loading
  width 100%
  height 600px
  display flex
  justify-content center
#myDynamicList
  width 100%
</style>
